<template>
    <div class="container">

        <template v-for="(subject, subject_index) in subjects" :key="subject_index">

            <div class="header">
                <div class="title">{{ subject.text }}</div>
                <div class="more">更多 <van-icon name="arrow" /></div>
            </div>
            <div class="content">
                <div class="menu" v-for="(menu, index) in menus" :key="index"
                    @click="goToExercise(subject_index, index)">
                    <van-image :src="menu.icon(subject.path)" fit="contain"></van-image>
                    <p>{{ menu.text }}</p>
                </div>
            </div>

        </template>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useStore } from '@/pinia/index.js';
const store = useStore();

import { car_type_list } from '@/tool/index.js';





import kemu1_1 from '@/assets/kemu1/1.png';
import kemu1_2 from '@/assets/kemu1/2.png';
import kemu1_3 from '@/assets/kemu1/3.png';
import kemu1_4 from '@/assets/kemu1/4.png';
import kemu4_1 from '@/assets/kemu4/1.png';
import kemu4_2 from '@/assets/kemu4/2.png';
import kemu4_3 from '@/assets/kemu4/3.png';
import kemu4_4 from '@/assets/kemu4/4.png';


const iconMap = {
    'kemu1': [kemu1_1, kemu1_2, kemu1_3, kemu1_4],
    'kemu4': [kemu4_1, kemu4_2, kemu4_3, kemu4_4]
};

const subjects = [
    { text: '科目一', path: 'kemu1' },
    { text: '科目四', path: 'kemu4' }
]

const getIcon = (path, num) => iconMap[path][num - 1];


const menus = [
    { text: '顺序练习', icon: (path) => getIcon(path, 1) },
    { text: '章节练习', icon: (path) => getIcon(path, 2) },
    { text: '专项练习', icon: (path) => getIcon(path, 3) },
    { text: '模拟考试', icon: (path) => getIcon(path, 4) },
]

const carType = ref('');



// watch监控store.car_type_index变化
watch(() => store.car_type_index, (newIndex) => {
    const { value } = car_type_list[newIndex]
    carType.value = value;
    console.log('carType', carType)
}, { immediate: true });


// 进入 XX科目  XX车型    XX城市 的练习页面
const goToExercise = (subject_index, index) => {

    let course = '';
    // 判断科目
    switch (subject_index) {
        case 0:
            course = 'kemu1'
            break;
        case 1:
            course = 'kemu4'
            break;
    }

    //判断练习类型
    switch (index) {
        case 0:
            // 顺序练习
            router.push({ path: `/exercise/sequence/${carType.value}/${course}/${store.currentCity.code}` })
            break;
        //章节练习
        case 1:
            // 章节练习
            router.push({ path: `/exercise/chapter/${carType}/${course}/${cityCode}` })
            break;
        //专项练习
        case 2:
            // 专项练习
            router.push({ path: `/exercise/strengthen/${carType}/${course}/${cityCode}` })
            break;
        //模拟考试
        case 3:


    }



    // if (index == 0) {
    //     // 顺序练习
    //     router.push({ path: `/exercise/sequence/${carType}/${course}/${cityCode}` })
    // }
    // else if (index == 1) {
    //     // 章节练习
    // }
    // else if (index == 2) {
    //     // 专项练习
    // }
    // else if (index == 3) {
    //     // 模拟考试
    // }
}

</script>
<style lang="scss" scoped>
.container {
    background-color: #fff !important;
    margin-bottom: 20px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;

        .title {
            font-size: 16px;
            color: #333;
            font-weight: 700;
        }

        .more {
            font-size: 14px;
            color: #999;
            font-weight: 400;
        }
    }

    .content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        justify-items: center;
        justify-content: center;
        align-content: center;
        gap: 10px; // 网格项之间的间距
        margin-bottom: 20px;

        .menu {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            margin-top: 10px;

            .van-image {
                transform: scale(0.6)
            }

            p {
                margin: 0;
                font-size: 14px;
                color: #333;
            }
        }
    }
}
</style>